// 从这里开始
var canvas = document.getElementById("c")
console.log(canvas)
    // 初始化WebGL上下文
var gl = canvas.getContext('webgl');
console.log(gl)
    // 使用完全不透明的黑色清除所有图像
gl.clearColor(0.0, 0.0, 0.0, 1.0);
// 用上面指定的颜色清除缓冲区
gl.clear(gl.COLOR_BUFFER_BIT);
var vertexShaderSource = 'void main(){ gl_PointSize=40.0; gl_Position =vec4(0.0,0.0,0.0,1.0);}'
    //片元着色器源码
var fragShaderSource = 'void main(){ gl_FragColor = vec4(1.0,0.0,0.0,1.0);}'
var data = new Float32Array([0.5, 0.5, -0.5, 0.5, -0.5, -0.5, 0.5, -0.5]);
//开始绘制，显示器显示结果
var vertex_shader = gl.createShader(gl.VERTEX_SHADER)
var fragment_shader = gl.createShader(gl.FRAGMENT_SHADER)
    //封装方法 初始化着色器
function initShader(gl, vertexShaderSource, fragmentShaderSource) {
    //创建顶点着色器对象
    var vertexShader = gl.createShader(gl.VERTEX_SHADER);
    //创建片元着色器对象
    var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
    //引入顶点、片元着色器源代码
    gl.shaderSource(vertexShader, vertexShaderSource);
    gl.shaderSource(fragmentShader, fragmentShaderSource);
    //编译顶点、片元着色器
    gl.compileShader(vertexShader);
    gl.compileShader(fragmentShader);
    //创建程序对象program
    var program = gl.createProgram();
    //附着顶点着色器和片元着色器到program
    gl.attachShader(program, vertexShader);
    gl.attachShader(program, fragmentShader);
    //链接program
    gl.linkProgram(program);
    //使用program
    gl.useProgram(program);
    //返回程序program对象
    return program;
}
var program = initShader(gl, vertexShaderSource, fragShaderSource)
    //绑定数据
function initBuffers(gl) {
    //var aposLocation = gl.getAttribLocation(program, 'apos');
    var buffer = gl.createBuffer();
    //绑定缓冲区对象,激活buffer
    gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
    //顶点数组data数据传入缓冲区
    gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
}
var b = initBuffers(gl)
console.log(b)
gl.drawArrays(gl.POINTS, 0, 1);
gl.drawArrays(gl.LINE_LOOP, 0, 2);